<template>
    <div id="app" style="height:100%">
        <section class="van-doc-demo-section demo-sku">
            <div class="van-doc-demo-block">
                <h2 class="van-doc-demo-block__title">基础用法</h2>
                <div class="sku-container">
                    <van-sku
                        v-model:show="showBase"
                        :sku="skuData.sku"
                        :quota="skuData.quota"
                        :goods="skuData.goods_info"
                        :goods-id="skuData.goods_id"
                        :quota-used="skuData.quota_used"
                        :properties="skuData.properties"
                        :hide-stock="skuData.sku.hide_stock"
                        :message-config="messageConfig"
                        :start-sale-num="skuData.start_sale_num"
                        disable-stepper-input
                        reset-stepper-on-hide
                        safe-area-inset-bottom
                        reset-selected-sku-on-hide
                        @buy-clicked="onBuyClicked"
                        @add-cart="onAddCartClicked"
                    />
                    <van-button type="success" block @click="showBase=true">基础用法</van-button>
                </div>
            </div>
        </section>
        <section class="van-doc-demo-section demo-sku">
            <div class="van-doc-demo-block">
                <h2 class="van-doc-demo-block__title">自定义步进器</h2>
                <div class="sku-container">
                    <van-sku
                        v-model:show="showStepper"
                        :sku="skuData.sku"
                        :quota="skuData.quota"
                        :goods="skuData.goods_info"
                        :goods-id="skuData.goods_id"
                        :quota-used="skuData.quota_used"
                        :properties="skuData.properties"
                        :hide-stock="skuData.sku.hide_stock"
                        :start-sale-num="skuData.start_sale_num"
                        :message-config="messageConfig"
                        :custom-stepper-config="customStepperConfig"
                        hide-quota-text
                        safe-area-inset-bottom
                        @buy-clicked="onBuyClicked"
                        @add-cart="onAddCartClicked"
                    />
                    <van-button type="success" block @click="showStepper=true">自定义步进器</van-button>
                </div>
            </div>
        </section>
        <section class="van-doc-demo-section demo-sku">
            <div class="van-doc-demo-block">
                <h2 class="van-doc-demo-block__title">隐藏售罄规格</h2>
                <div class="sku-container">
                    <van-sku
                        v-model:show="showSoldout"
                        :sku="skuData.sku"
                        :quota="skuData.quota"
                        :goods="skuData.goods_info"
                        :goods-id="skuData.goods_id"
                        :quota-used="skuData.quota_used"
                        :properties="skuData.properties"
                        :hide-stock="skuData.sku.hide_stock"
                        :message-config="messageConfig"
                        :start-sale-num="skuData.start_sale_num"
                        :show-soldout-sku="false"
                        :custom-stepper-config="customStepperConfig"
                        hide-quota-text
                        safe-area-inset-bottom
                        @buy-clicked="onBuyClicked"
                        @add-cart="onAddCartClicked"
                    />
                    <van-button type="success" block @click="showSoldout=true">隐藏售罄规格</van-button>
                </div>
            </div>
        </section>
        <section class="van-doc-demo-section demo-sku">
            <div class="van-doc-demo-block">
                <h2 class="van-doc-demo-block__title">大图预览模式</h2>
                <div class="sku-container">
                    <van-sku
                        v-model:show="showLargePicturePreview"
                        :sku="skuData2.sku"
                        :quota="skuData2.quota"
                        :goods="skuData2.goods_info"
                        :goods-id="skuData2.goods_id"
                        :hide-stock="skuData2.sku.hide_stock"
                        :properties="skuData2.properties"
                        :quota-used="skuData2.quota_used"
                        :message-config="messageConfig"
                        :start-sale-num="skuData2.start_sale_num"
                        :show-header-image="false"
                        disable-stepper-input
                        reset-stepper-on-hide
                        safe-area-inset-bottom
                        reset-selected-sku-on-hide
                        @buy-clicked="onBuyClicked"
                        @add-cart="onAddCartClicked"
                    />
                    <van-button type="success" block @click="showLargePicturePreview=true">大图预览模式</van-button>
                </div>
            </div>
        </section>
        <section class="van-doc-demo-section demo-sku">
            <div class="van-doc-demo-block">
                <h2 class="van-doc-demo-block__title">通过插槽定制</h2>
                <div class="sku-container">
                    <van-sku
                        v-model:show="showCustom"
                        :stepper-title="'我要买'"
                        :sku="skuData.sku"
                        :goods="skuData.goods_info"
                        :goods-id="skuData.goods_id"
                        :hide-stock="skuData.sku.hide_stock"
                        :quota="skuData.quota"
                        :quota-used="skuData.quota_used"
                        :start-sale-num="skuData.start_sale_num"
                        :properties="skuData.properties"
                        show-add-cart-btn
                        reset-stepper-on-hide
                        safe-area-inset-bottom
                        :initial-sku="initialSku"
                        :message-config="messageConfig"
                        @buy-clicked="onBuyClicked"
                        @add-cart="onAddCartClicked"
                    >
                        <template #sku-header-price="{ price }">
                            <div class="van-sku__goods-price">
                                <span class="van-sku__price-symbol">￥</span>
                                <span class="van-sku__price-num">{{ price }}</span>
                            </div>
                        </template>
                        <template #sku-actions-top>
                            <div class="van-sku-header-item text-center">
                                商品不多，赶快购买吧
                            </div>
                        </template>
                        <template #sku-actions="{ skuEventBus }">
                            <div class="van-sku-actions">
                                <van-button
                                    square
                                    size="large"
                                    type="warning"
                                    @click="onPointClicked"
                                >
                                    积分兑换
                                </van-button>
                                <van-button
                                    square
                                    size="large"
                                    type="danger"
                                    @click="skuEventBus.emit('sku:buy')"
                                >
                                    买买买
                                </van-button>
                            </div>
                        </template>
                    </van-sku>
                    <van-button type="success" block @click="showCustom=true">通过插槽定制</van-button>
                </div>
            </div>
        </section>
        <section class="van-doc-demo-section demo-sku">
            <div class="van-doc-demo-block">
                <h2 class="van-doc-demo-block__title">VUE3示例：复制文本“1234567890”</h2>
                <div class="sku-container"><van-button type="primary" block v-clipboard:copy="numStr" v-clipboard:success="onCopy">复制文本</van-button></div>
            </div>
        </section>
        <section class="van-doc-demo-section demo-sku">
            <div class="van-doc-demo-block">
                <h2 class="van-doc-demo-block__title">VUE3示例：二维码生成</h2>
                <div class="sku-container"><van-button type="primary" block @click="showPopup">生成二维码</van-button></div>
            </div>
        </section>
        <van-popup v-model:show="show">
            <vue-qr :size="qrCode.size"
                    :text="qrCode.text"
                    :margin="qrCode.margin"
                    :logoScale="qrCode.logoScale"
                    :dotScale="qrCode.dotScale"
                    :callback="qrCodeCallback"/>
            <i class="ewm">我的<br>测试</i>
        </van-popup>
    </div>
</template>
<script>
import { defineComponent,ref } from "vue";
import {
    Button,Toast,Popup,
} from 'vant';
//vant3下第三方SKU适配 BEGIN
//import "vant/lib/index.less";
import "vant/lib/image/index.less";
import "vant/lib/image-preview/index.less";
import "vant/lib/popup/index.less";
import "vant/lib/toast/index.less";
import "vant/lib/stepper/index.less";
import "vant/lib/cell/index.less";
import "vant/lib/field/index.less";
import "vant/lib/picker/index.less";

import "vant-next-sku/lib/index.less";
import Sku from "vant-next-sku";
//vant3下第三方SKU适配 END
import { initialSku, getSkuData } from "./util/data";
import vueQr from 'vue-qr/src/packages/vue-qr.vue'; //只有这样写才能支持vue3

export default defineComponent({
    components:{
        [Button.name]: Button, [Toast.name]: Toast, [Popup.name]:Popup,
        [Sku.name]: Sku,
        vueQr,
    },
    setup(){
        const numStr='1234567890';
        const onCopy = (e) => {
            Toast('文本 '+e.text+' 已复制！');
        }
        const show = ref(false);
        const showPopup = () => {
            show.value = true;
        };

        const qrCodeCallback = () => {
            console.log("二维码生成了")
        };
        return {
            numStr,
            onCopy,
            show,
            showPopup,
            qrCodeCallback,

        }
    },
    data(){
        return{
            qrCode:{
                text:'https://youzan.github.io/vant/v3/#/zh-CN/home',
                size:180,
                dotScale:1,
                margin:0,
                logoScale:0.3
            },
            skuData : null,
            skuData2 : null,
            showBase: false,
            showCustom: false,
            showStepper: false,
            showSoldout: false,
            showLargePicturePreview: false,

            customStepperConfig: {
                quotaText: "单次限购100件",
                stockFormatter: (stock) => `剩余${stock}`,
                handleOverLimit: (data) => {
                    const { action, limitType, quota, startSaleNum = 1 } = data;

                    if (action === "minus") {
                        Toast(
                            startSaleNum > 1 ? `${startSaleNum}件起售` : "至少选择一件商品"
                        );
                    } else if (action === "plus") {
                        if (limitType <= quota) {
                            Toast(`限购${quota}件`);
                        } else {
                            Toast("库存不够了");
                        }
                    }
                },
            },

            messageConfig: {
                initialMessages: {
                    留言1: "商品留言",
                },
                uploadImg: (file, img) =>
                    new Promise((resolve) => {
                        setTimeout(() => resolve(img), 1000);
                    }),
                uploadMaxSize: 3,
            },
            messageConfig0: {},
        }
    },
    methods: {
        onBuyClicked(data) {
            Toast("buy:" + JSON.stringify(data));
        },

        onAddCartClicked(data) {
            Toast("add cart:" + JSON.stringify(data));
        },

        onPointClicked() {
            Toast("积分兑换");
        },
    },
    created() {
        this.skuData = getSkuData();
        this.skuData2 = getSkuData(true);
        this.initialSku = initialSku;
    }
})
</script>
<style scoped lang="scss">
.sku-container{padding:0 16px}
.van-doc-demo-block__title {
    margin: 0;
    padding: 20px 16px 10px;
    color: rgba(69, 90, 100, 0.6);
    font-weight: normal;
    font-size: 14px;
    line-height: 16px;
}
i.ewm{
  position: absolute;
  z-index: 9;
  left:50%;
  margin-left:-20px;
  top:50%;
  margin-top:-20px;
  display: inline-block;
  width:38px;
  height:38px;
  line-height: 16px;
  padding-top:2px;
  background: #ee5313;
  color:#fff;
  text-align: center;
  border-radius: 4px;
  font-size:12px;
  font-style: normal;
}
</style>